<template>
    <div class="contentContainer">
        <el-table
            :data="tableData"
            style="width: 100%;"
        >
            <el-table-column
                prop="id"
                label="ID"
                width="80"
            />
            <el-table-column 
                label="封面"
                width="180"
            >
                <template #default="scope">
                    <el-image 
                        style="width: 200px;"
                        :src="scope.row.cover"
                        fit="contain" 
                    />
                </template>
            </el-table-column>
            <el-table-column
                prop="name"
                label="运营位名称"
                width="180"
            />
            <el-table-column
                prop="content"
                label="运营语"
                width="240"
            />
            <el-table-column 
                prop="uri"
                label="落地页"
                width="100"
            />
            <el-table-column 
                prop="created_at"
                label="创建时间"
                width="280"
            />
            <el-table-column label="运营位状态">
                <template #default="scope">
                    <el-tag :type="(scope.row.status === 0) ? 'info' : 'success'" >
                        {{ (scope.row.status === 0) ? '未启用' : '已启用' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button 
                        :type="(scope.row.status === 0) ? 'primary' : 'danger'"
                        @click="changeState(scope.row)"
                    >
                        {{  (scope.row.status === 0) ? '开启' : '禁用'  }}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { RequestPath, startRequest, type OperationalItemData, type OperationalResponseData } from '../base/RequestWork';
import { ElMessage } from 'element-plus';

// 列表绑定数据
let tableData = ref();
// 组件挂载时的生命周期函数
onMounted(() => {
    // 请求所有运营位数据
    startRequest(RequestPath.operationalGet, 'get', { 'status': 0 }).then((response) => {
        const data = response.data as OperationalResponseData;
        tableData.value = data.datas ?? [];
    }).catch((error) => {
        ElMessage.error({
            message: error.response.data.error
        });
    });
});
// 更新运营位状态的方法
const changeState = (item: OperationalItemData) => {
    startRequest(RequestPath.operationalUpdate, 'post', {
        status: item.status === 0 ? 1 : 0,
        id: item.id
    }).then(() => {
        // 请求成功后，修改列表绑定的数据
        tableData.value.forEach((ele: OperationalItemData) => {
            if (item.id === ele.id) {
                ele.status = (item.status === 0 ? 1 : 0);
            }
        });
    }).catch((error) => {
        ElMessage.error({
            message: error.response.error
        });
    });
}
</script>